<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<style>
    #groupIndex {
        background: #fff;
        padding: 0 20px 30px;
    }

    .status-normal {
        color: #6ACAA5;
    }

    .status-hidden {
        color: #C4C4C4;
    }

    [v-cloak] {
        display: none
    }
</style>

<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<div id="htmlIndex" v-cloak >
    <div class="screen-container">
        <div class="screen-container-show">
            <!--顶部选项卡一般status-->
            <div class="screen-container-left display-flex">
                <div class="order-refresh display-flex" @click="reqOrderList">
                    <i class="el-icon-refresh"></i>
                </div>


            </div>
            <!--顶部选项卡一般status 结束-->
            <!--自动展开的搜索列表-->
            <div class="screen-container-right display-flex">
                <div class="display-flex margin-right-20">

                </div>

                <!--                       <el-button type="primary" size="small" @click="baseAction('create',null)"><i class="el-icon-plus"></i> 新建</el-button>-->
                <template v-if="searchForm.status == 'nosend'">
                    <!--可以修改此处逻辑用来安置自定义按钮-->
                    <div class="common-btn cursor-pointer screen-button" @click="test">演示按钮</div>
                </template>
                <div :class="screenType?'arrow-open':'arrow-close'" @click="changeSwitch">
                    <div class="arrow-container">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>
        </div>
        <!--自动展开的搜索列表结束-->

        <!--需要手动点击展开的搜索-->
        <el-collapse-transition>
            <div class="screen-con" v-if="screenType">
                <!--除图片、文件、权重外所有设置在列表展示的字段都会自动生成到搜索栏-->
                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id')}</div>
                    <el-input placeholder="请输入{:__('Id')}" v-model="searchForm.id" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('User_id')}</div>
                    <el-select style="position: relative;" v-model="searchForm.user_id" filterable
                               size="small" placeholder="" :filter-method="dataUserFilter">

                        <el-option v-for="item in aboutUserOptions" :key="item.id" :label="item.name??item.username"
                                   :value="item.id">
                            <!--可根据自己的业务需求加工一下代码样式-->
                            <div class="display-flex" style="justify-content: space-around;">
                                <span>{{ item.id }}</span>
                                <div style="width: 24px;">
                                    <img v-if="item.image" style="width:24px;height:24px;border-radius:50%;"
                                         :src="Fast.api.cdnurl(item.image)">
                                </div>
                                <div style="width: 80px;">{{ item.name ?? item.username }}</div>
                                <div style="width: 90px;">
                                    <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                    <div style="width: 90px;text-align: center;" v-else>-</div>
                                </div>
                            </div>
                        </el-option>
                        <div class="text-center"
                             style="position: sticky;background: #fff;height:38px;top:0;z-index:1">
                            <div class="text-normal display-flex" style="justify-content: center;">
                                <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentUserPage"
                                               :total="totalUserPage" layout="total, sizes, prev, pager,next, jumper"
                                               pager-count="5" @size-change.stop="pageUserSizeChange"
                                               @current-change="pageUserCurrentChange"/>
                                </el-pagination>
                                <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getUser">跳转
                                </div>
                            </div>
                        </div>
                    </el-select>


                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Native_place')}</div>
                    <el-input placeholder="请输入{:__('Native_place')}" v-model="searchForm.native_place"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Address')}</div>
                    <el-input placeholder="请输入{:__('Address')}" v-model="searchForm.address" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Work_unit')}</div>
                    <el-input placeholder="请输入{:__('Work_unit')}" v-model="searchForm.work_unit"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Linkman')}</div>
                    <el-input placeholder="请输入{:__('Linkman')}" v-model="searchForm.linkman" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Linkman_phone')}</div>
                    <el-input placeholder="请输入{:__('Linkman_phone')}" v-model="searchForm.linkman_phone"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Work_type')}</div>
                    <el-input placeholder="请输入{:__('Work_type')}" v-model="searchForm.work_type"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-select-item">
                    <div class="header-input-tip">{:__('Createtime')}</div>
                    <el-date-picker v-model="searchForm.createtime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right"
                                    size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>

                <div class="display-flex header-select-item">
                    <div class="header-input-tip">{:__('Updatetime')}</div>
                    <el-date-picker v-model="searchForm.updatetime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right"
                                    size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id_card')}</div>
                    <el-input placeholder="请输入{:__('Id_card')}" v-model="searchForm.id_card" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Date_birth')}</div>
                    <el-input placeholder="请输入{:__('Date_birth')}" v-model="searchForm.date_birth"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id_card_front')}</div>
                    <el-input placeholder="请输入{:__('Id_card_front')}" v-model="searchForm.id_card_front"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id_card_back')}</div>
                    <el-input placeholder="请输入{:__('Id_card_back')}" v-model="searchForm.id_card_back"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Education')}</div>
                    <el-input placeholder="请输入{:__('Education')}" v-model="searchForm.education"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Sign')}</div>
                    <el-input placeholder="请输入{:__('Sign')}" v-model="searchForm.sign" size="small"></el-input>
                </div>
                <!--搜索栏字段结束-->
                <div class="header-button-item display-flex">
                    <div class="common-btn" @click="screenEmpty">重置</div>
                    <div class="common-btn header-button-select" @click="reqOrderList(0,10)">筛选</div>
                </div>
            </div>
        </el-collapse-transition>
        <!--需要手动点击展开的搜索结束-->
    </div>
    <div class="custom-table " v-loading="loading">
        <div v-loading="tableAjax">
            <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
                      :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
                      :header-cell-class-name="tableCellClassName" @row-dblclick="baseAction" @sort-change="sortChange">
                <!--                                        <el-table-column min-width="100" label="{:__('Id')}" sortable="custom" prop="id"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.id" placement="top"><el-text>{{scope.row.id}}</el-text></el-tooltip></div></template></el-table-column>-->

                <el-table-column min-width="120" label="{:__('User_id')}" sortable="custom" prop="user_id">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.user.mobile" placement="top">
                                <el-text>{{scope.row.user.mobile}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('审核状态')}" prop="state">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.state" placement="top">
                                <el-tag v-if="scope.row.state == 1" type="success">审核通过</el-tag>
                                <el-tag v-if="scope.row.state == 0" type="warning">待审核</el-tag>
                                <el-tag v-if="scope.row.state == 2" type="danger">未通过</el-tag>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('姓名')}" prop="username">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.username" placement="top">
                                <el-text>{{scope.row.username ? scope.row.username.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('一寸照')}" prop="id_card_front">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.one_inch_photo" placement="top">
                                <el-image
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.one_inch_photo"
                                        :preview-src-list="[scope.row.one_inch_photo]"
                                >
                                </el-image>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('手机号')}" prop="username">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.mobile" placement="top">
                                <el-text>{{scope.row.mobile ? scope.row.mobile.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('性别')}" prop="gender">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.gender" placement="top">
                                <el-text>{{scope.row.gender == 0 ? "女" : "男"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('年龄')}" prop="age">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.age" placement="top">
                                <el-text>{{scope.row.age ? scope.row.age : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('Native_place')}" prop="native_place">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.native_place" placement="top">
                                <el-text>{{scope.row.native_place ? scope.row.native_place.substr(0, 18) : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Address')}" prop="address">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.address" placement="top">
                                <el-text>{{scope.row.address ? scope.row.address.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Work_unit')}" prop="work_unit">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.work_unit" placement="top">
                                <el-text>{{scope.row.work_unit ? scope.row.work_unit.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Linkman')}" prop="linkman">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.linkman" placement="top">
                                <el-text>{{scope.row.linkman ? scope.row.linkman.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Linkman_phone')}" prop="linkman_phone">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.linkman_phone" placement="top">
                                <el-text>{{scope.row.linkman_phone ? scope.row.linkman_phone.substr(0, 18) : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>


                <el-table-column min-width="100" label="{:__('申请时间')}" prop="createtime">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{moment(scope.row.createtime * 1000).format("YYYY-MM-DD HH:mm:ss")}}
                        </div>
                    </template>
                </el-table-column>

                <!--                        <el-table-column min-width="100" label="{:__('Updatetime')}" prop="updatetime"><template slot-scope="scope"><div class="ellipsis-item">{{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}</div></template></el-table-column>-->

                <el-table-column min-width="100" label="{:__('身份证号')}" prop="id_card">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card" placement="top">
                                <el-text>{{scope.row.id_card ? scope.row.id_card.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('生日')}" prop="date_birth">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.date_birth" placement="top">
                                <el-text>{{scope.row.birthday}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Id_card_front')}" prop="id_card_front">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card_front" placement="top">
                                <el-image
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.id_card_front"
                                        :preview-src-list="[scope.row.id_card_front]"
                                >
                                </el-image>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Id_card_back')}" prop="id_card_back">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card_back" placement="top">
                                <el-image
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.id_card_back"
                                        :preview-src-list="[scope.row.id_card_back]"
                                >
                                </el-image>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Education')}" prop="education">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.education" placement="top">
                                <el-image
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.education"
                                        :preview-src-list="[scope.row.education]"
                                >
                                </el-image>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <!--                        <el-table-column min-width="100" label="{:__('签名')}" prop="sign"><template slot-scope="scope"><div class="ellipsis-item"><el-tooltip class="item" effect="light" :content="scope.row.sign" placement="top">-->
                <!--                            <el-image-->
                <!--                                    fit="contain"-->
                <!--                                    style="width: 100px; height: 50px"-->
                <!--                                    :src="scope.row.sign"-->
                <!--                                    :preview-src-list="[scope.row.sign]"-->
                <!--                            >-->
                <!--                            </el-image>-->
                <!--                        </el-tooltip></div></template></el-table-column>-->

                <el-table-column min-width="100" label="{:__('工种')}" sortable="custom" prop="work_type">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.type.name" placement="top">
                                <el-text>{{scope.row.type.name}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('负责人')}" prop="type.director">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.type.directors.username"
                                        placement="top">
                                <el-text>
                                    {{scope.row.type.directors.username ? scope.row.type.directors.username : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('安全管理人')}" prop="type.manager">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.type.managers.username"
                                        placement="top">
                                <el-text>{{scope.row.type.managers.username ? scope.row.type.managers.username : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="130" fixed="right">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state == 0">
                            {if condition = "$auth->check('users/information/edit')"}
                            <span class="table-edit-text" @click="baseAction('edit',scope.row.id)">审核</span>
                            {/if}
                            <!--                            {if condition = "$auth->check('users/information/del')"}-->
                            <!--                            <span class="table-delete-text" @click="baseAction('del',scope.row.id)">删除</span>-->
                            <!--                            {/if}-->
                        </div>
                        <div v-else class="table-edit-text">已处理</div>
                        <span class="table-edit-text" @click="baseAction('export',scope.row.id)">导出</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[10, 20, 50, 100,200,500,1000]" :page-size="limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>
</div>